<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

	<u-popup :show="show" @close="closeShow" mode="top" duration="0">
		<div class="search-pop-div" :style="{'height':Height+'px'}">
			<div style="padding:24rpx;height:116rpx">
				<u-search placeholder="输入牌号/品名/厂家等关键词" v-model="keywords" :showAction="true" actionText="取消" @custom="keywords='';submitsearch()" @search="submitsearch" @change="handInput"></u-search>
			</div>
			<div class="search-con">
				<div class="title" v-if="myList.length > 0">
					最近搜索
					<u-icon name="trash-fill" size="20" @click="delSearch"></u-icon>
				</div>
				<div class="keyword-con">
					<span class="keyword-item" v-for="item in myList"  @click="submititem(item.content)" :key="item.content">{{item.content}}</span> 
				</div>
				<div class="title" style="margin-top:40rpx"> 热门搜索</div>
				<div class="keyword-con">
					<span class="keyword-item" v-for="item in hotList"  @click="submititem(item.content)" :key="item.content">{{item.content}}</span> 
				</div>
			</div>
		    <div class="search-list-div" v-show="showSearch1" :style="{'height':Height2+'px'}">
		    	<div class="search-item" @click="submititem(item.content)" v-for="item in searchList" :key="item.content">{{item.content}}</div>
		    </div>
		</div>
	</u-popup>
	
	
  </div>
</template>

<script>
  import {historicalQuery,addHistoricalQuery,delHistoricalQuery} from '@/config/api.js'
  import store from '@/store';
  import base from '@/config/baseUrl.js';
  export default {
    components: {
    

    },
    data() {
      return {
		show:false,
		keywords:'',
		showSearch1:false,
		searchList:[],
		hotList:[],
		myList:[],
		//#ifdef MP
		Height: uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().windowTop + 13,
		Height2: uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight + 13 - 58,
		// #endif
		//#ifdef H5
		Height: uni.getSystemInfoSync().screenHeight,
		Height2: uni.getSystemInfoSync().screenHeight - 58,
		// #endif
      }
    },

    methods: {
		delSearch(){
			delHistoricalQuery().then(()=>{
				this.getMy()
			})
		},
		//获取热门
		gethot(){
			historicalQuery({isMy:0,pageSize:20,pageNum :1}).then((res)=>{
				this.hotList = res
			})
		},
		//获取历史
		getMy(){
			historicalQuery({isMy:1,pageSize:20,pageNum :1}).then((res)=>{
				this.myList = res
			})
		},
		//新增搜索记录
		addHistorical(content){
			let storeUserInfo = store.state.userInfo;
			if (!storeUserInfo.userId){ // nvue页面读取不到vuex里面数据，将取缓存
			    storeUserInfo = uni.getStorageSync('userInfo')
			}
			if(content != '' && storeUserInfo.userId){
				addHistoricalQuery({content:content})
			}
		},
		closeSearch1(){
			this.showSearch1 = false
		},
		submititem(item){
			this.keywords = item
			this.closeSearch1()
			this.submitsearch()
			this.addHistorical(item)
		},
	    //关键词联想
	    handInput(val){
			this.keywords =val
			console.log("keywords",this.keywords)
			if(this.keywords != ''){
			  this.showSearch1 = true;
			  historicalQuery({content:this.keywords,pageSize:10,pageNum :1}).then((res)=>{
				this.searchList =  res
			  })
			}else{
			  this.showSearch1 = false;  
			}
	    },
		  
		init(keywords){
			this.show = true;
			this.keywords = keywords;
			let storeUserInfo = store.state.userInfo;
			if (!storeUserInfo.userId){ // nvue页面读取不到vuex里面数据，将取缓存
			    storeUserInfo = uni.getStorageSync('userInfo')
			}
			if (storeUserInfo.userId) {
				this.getMy()
			}
			this.gethot()
		},
		submitsearch(){
			this.closeShow()
			this.closeSearch1()
			this.$emit('searchList',this.keywords)
			this.addHistorical(this.keywords)
		},
		closeShow(){
			this.show = false
		},
		
		
		
	}
	

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.search-pop-div{
	height:100vh;
	position: relative;
	.search-con{
		height:calc(100% - 164rpx);
		overflow-y: auto;
		.title{
			font-size: 28rpx;
			color: #808080;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 32rpx;
			@include flexbox(space-between,center);
		}
		.keyword-con{
			padding: 0 32rpx;
			.keyword-item{
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				background: #efefef;
				color: #333;
				display: inline-block;
				margin-right: 20rpx;
				margin-top: 20rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
		}
	}
}
.search-list-div{
	position: absolute;
	width:100%;
	top:116rpx;
	overflow-y: auto;
	background: #fff;
	.search-item{
		padding: 20rpx 32rpx;
		font-size: 28rpx;
		color: #333;
		position: relative;
	}
	.search-item:after {
	    width: 100%;
	    position: absolute;
	    box-sizing: border-box;
	    content: ' ';
	    left: 0;
	    bottom: 0;
	    border-bottom: 1px solid #eeeeee;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	}
	
}
</style>